// import React from "react";
// import ReactDOM from "react-dom/client";
// import { HashRouter as Router, Routes, Route } from "react-router-dom";
// import Home from "./components/Home";
// import User from "./components/User";
// import Profile from "./components/Profile";

// const root = ReactDOM.createRoot(document.getElementById("root"));
// root.render(
//   <React.StrictMode>
//     <Router>
//       <Routes>
//         <Route path="/" element={<Home />} exact></Route>
//         <Route path="/user" element={<User />}></Route>
//         <Route path="/profile" element={<Profile />}></Route>
//       </Routes>
//     </Router>
//   </React.StrictMode>
// );

import React from "react";
import ReactDOM from "react-dom/client";
import {
  HashRouter as Router,
  Route,
  Switch,
  // Link,
  NavLink,
  Redirect,
} from "./react-router-dom";
import Home from "./components/Home";
import User from "./components/User";
import Profile from "./components/Profile";
import Login from "./components/Login";
import Protected from "./components/Protected";
import NavHeader from "./components/NavHeader";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Router
      getUserConfirmation={() => {
        console.log("self");
        return window.confirm;
      }}
    >
      <NavHeader title="首页" />
      <ul>
        <li>
          <NavLink
            className="strong"
            style={{ textDecoration: "line-through" }}
            activeStyle={{ color: "red" }}
            activeClassName="active"
            to="/"
          >
            首页
          </NavLink>
        </li>
        <li>
          <NavLink
            activeStyle={{ color: "red" }}
            activeClassName="active"
            to="/user"
          >
            用户管理
          </NavLink>
        </li>
        <li>
          <NavLink
            activeStyle={{ color: "red" }}
            activeClassName="active"
            to="/profile"
          >
            个人中心
          </NavLink>
        </li>
      </ul>
      <Switch>
        <Route path="/" component={Home} exact></Route>
        <Route path="/user" component={User}></Route>
        <Protected path="/profile" component={Profile}></Protected>
        <Route path="/login" component={Login}></Route>
        <Redirect to="/" />
      </Switch>
    </Router>
  </React.StrictMode>
);
